<template>
  <div class="common-container">
    <div class="col col-hotel">
      <h2 class="hd" style="position: relative">
        <a data-title="酒店标题" href="/hotel/10065/" target="_blank"><i></i>酒店住宿攻略</a>
        <div class="hotel-hover" style="position: absolute; top: 0; right: 0; cursor: pointer">
          <img src="https://p3-q.mafengwo.net/s12/M00/00/CF/wKgED1wI5WiALDckAAAIwZeVUSE365.png" style="width: 105px" />
        </div>
        <div class="hotel-xg" style="position: absolute; top: 30px; left: 40px; z-index: 99; display: none">
          <img src="https://n1-q.mafengwo.net/s12/M00/07/66/wKgED1wI6L-AN-0vAACOCj-O70E006.png" style="width: 456px" />
        </div>
      </h2>
      <dl>
        <dt>
          <a data-title="酒店分区1" class="r-tit" href="/hotel/10065/#area=45" target="_blank"><span class="No">1</span>天安门周边</a>
        </dt>
        <dd>
          <a data-title="酒店分区1" href="/hotel/10065/#area=45" target="_blank">
            <div class="r-photo">
              <img src="https://p1-q.mafengwo.net/s10/M00/77/5B/wKgBZ1mBnIGAGD4gAACw8Rq2ZmE806.png" width="296" height="156" />
            </div>
            <div class="r-text">
              <h4 class="percent"><em>31%</em>的游客选择住在这里</h4>
              <p>有<span class="num">200</span>家酒店。 住在这附近，步行即可达天安门广场，可方便早起看升国旗。 前门大街有不少民宿，四合院形式，可...</p>
            </div>
          </a>
        </dd>
      </dl>
      <dl>
        <dt>
          <a data-title="酒店分区2" class="r-tit" href="/hotel/10065/#area=49" target="_blank"><span class="No">2</span>北京站周边</a>
        </dt>
        <dd>
          <a data-title="酒店分区2" href="/hotel/10065/#area=49" target="_blank">
            <div class="r-text">
              <h4 class="percent"><em>18%</em>的游客选择住在这里</h4>
              <p>有<span class="num">187</span>家酒店。 这里酒店种类繁多，从百年历史的老字号，到快捷青旅一应俱全。 很多人刚到北京就在附近快捷停留...</p>
            </div>
          </a>
        </dd>
      </dl>
      <div class="ft">
        <a data-title="查看全部酒店" class="a-link" href="/hotel/10065/" target="_blank"><i class="icon-link"></i>8025家酒店</a>
      </div>
    </div>
    <div class="col col-scenic">
      <h2 class="hd" style="position: relative">
        <a data-title="景点标题" href="/jd/10065/gonglve.html" target="_blank"><i></i>必游景点排行</a>
        <div class="scenic-hover" style="position: absolute; top: 0; right: 0; cursor: pointer">
          <img src="https://n2-q.mafengwo.net/s12/M00/03/2C/wKgED1wI5paANZviAAAI-q86IOM699.png" style="width: 105px" />
        </div>
        <div class="scenic-xg" style="position: absolute; top: 30px; left: 40px; z-index: 99; display: none">
          <img src="https://n1-q.mafengwo.net/s12/M00/07/66/wKgED1wI6L-AN-0vAACOCj-O70E006.png" style="width: 456px" />
        </div>
      </h2>
      <dl>
        <dt>
          <a data-title="景点1点评" class="r-num" href="/poi/3474.html#reviews" target="_blank">12595个点评</a>
          <a data-title="景点1" class="r-tit" href="/poi/3474.html" target="_blank"><span class="No">1</span>故宫</a>
        </dt>
        <dd>
          <a data-title="景点1" href="/poi/3474.html" target="_blank">
            <div class="r-photo">
              <img src="https://p1-q.mafengwo.net/s19/M00/2D/FE/CoNFJmJXiTI2MiNEAAkbC7NyIs4.jpeg?imageMogr2%2Fthumbnail%2F%21296x156r%2Fgravity%2FCenter%2Fcrop%2F%21296x156%2Fquality%2F100" width="296" height="156" />
            </div>
            <div class="r-text">
              <span class="user" title="夏娃陈" rel="nofollow"> <img src="https://p1-q.mafengwo.net/s9/M00/1F/E6/wKgBs1hHoLmAbtk3AABHgYX47IU65.jpeg?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90" />夏娃陈 </span>
              &nbsp;“4月27日下午两点左右到故宫博物院参观。玩了两个多小时。看了几个大殿。这次是第二次来这里。...”
            </div>
          </a>
        </dd>
      </dl>
      <dl>
        <dt>
          <a data-title="景点2点评" class="r-num" href="/poi/3519.html#reviews" target="_blank">8083个点评</a>
          <a data-title="景点2" class="r-tit" href="/poi/3519.html" target="_blank"><span class="No">2</span>八达岭长城</a>
        </dt>
        <dd>
          <a data-title="景点2" href="/poi/3519.html" target="_blank">
            <div class="r-text">
              <span class="user" title="我快乐的去" rel="nofollow"> <img src="https://p1-q.mafengwo.net/s13/M00/D1/C3/wKgEaVzREciAWmtFAADQFtl4ymY43.jpeg?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90" />我快乐的去 </span>
              &nbsp;“【交通】从积水潭地铁B口出来，会有指示标志，跟着箭头走到877公交总站即可。真正的877是可以...”
            </div>
          </a>
        </dd>
      </dl>
      <div class="ft">
        <a data-title="查看全部景点" class="a-link" href="/jd/10065/gonglve.html"><i class="icon-link"></i>14573个景点</a>
      </div>
    </div>
    <div class="col col-cate">
      <h2 class="hd" style="position: relative">
        <a data-title="餐饮标题" href="/cy/10065/gonglve.html" target="_blank"><i></i>必吃美食排行</a>
        <div class="cate-hover" style="position: absolute; top: 0; right: 0; cursor: pointer">
          <img src="https://b4-q.mafengwo.net/s12/M00/04/1F/wKgED1wI5xKAdRTWAAAJgx2voSo398.png" style="width: 105px" />
        </div>
        <div class="cate-xg" style="position: absolute; top: 30px; right: 0px; z-index: 99; display: none">
          <img src="https://n1-q.mafengwo.net/s12/M00/07/66/wKgED1wI6L-AN-0vAACOCj-O70E006.png" style="width: 456px" />
        </div>
      </h2>
      <dl>
        <dt>
          <a data-title="餐饮1" class="r-tit" href="/cy/10065/13486.html"><span class="No">1</span>北京烤鸭</a>
        </dt>
        <dd>
          <a data-title="餐饮1" href="/cy/10065/13486.html">
            <div class="r-photo">
              <img src="https://p1-q.mafengwo.net/s9/M00/FE/49/wKgBs1ZEQIuAdxAtAAKBoGN1nrw95.jpeg?imageMogr2%2Fthumbnail%2F%21296x156r%2Fgravity%2FCenter%2Fcrop%2F%21296x156%2Fquality%2F100" width="296" height="156" />
            </div>
            <div class="r-text">北京烤鸭有“天下第一美味”之称，可以说是北京饮食的代表菜。烤鸭分为以全聚德为代表的挂炉烤鸭和以便宜坊为代表的焖炉烤鸭两种，均选...</div>
          </a>
        </dd>
      </dl>
      <dl>
        <dt>
          <a data-title="餐饮2" class="r-tit" href="/cy/10065/38070.html"><span class="No">2</span>炸酱面</a>
        </dt>
        <dd>
          <a data-title="餐饮2" href="/cy/10065/38070.html">
            <div class="r-text">炸酱面是老北京的特色美食之一，由菜码、炸酱拌面条而成。“炸酱”就是将肉丁及葱姜等放在油里炒，再加入黄酱或甜面酱炸炒，“菜码儿”...</div>
          </a>
        </dd>
      </dl>
      <div class="ft">
        <a data-title="查看全部餐饮" class="a-link" href="/cy/10065/gonglve.html"><i class="icon-link"></i>100718个餐厅</a>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.common-container {
  width: 1000px;
  margin: 0 auto;
  .col {
    float: left;
    width: 300px;
    display: inline;
    margin: 0 50px 0 0;
    &.col-cate {
      margin: 0;
    }
    .hd {
      margin-bottom: 10px;
      font-size: 24px;
      font-weight: normal;
      line-height: 24px;
      a {
        padding-right: 20px;
        position: relative;
        display: inline-block;
        color: #000;
        &:hover {
          color: #ff7200;
          text-decoration: none;
        }
      }
      i {
        position: absolute;
        right: 0;
        top: 6px;
        width: 13px;
        height: 13px;
        background: url(../../assets/images/place-sprite8.png) no-repeat -30px 0;
        overflow: hidden;
      }
    }
    dl {
      margin-bottom: 15px;
      padding: 5px 0;
      &:hover {
        padding: 5px;
        margin-left: -5px;
        margin-right: -5px;
        background-color: #fff;
      }
      dt {
        height: 27px;
        margin-bottom: 12px;
        line-height: 27px;
        overflow: hidden;
        font-size: 16px;
        .r-tit {
          font-size: 18px;
          color: #333;
        }
        .No {
          float: left;
          margin: 4px 10px 0 0;
          width: 20px;
          height: 20px;
          background-color: #192885;
          border-radius: 3px;
          text-align: center;
          color: #fff;
          font-size: 16px;
          line-height: 20px;
        }
      }
      dd {
        a {
          color: #666;
          text-decoration: none;
        }
        .r-photo {
          margin: 15px 0;
          padding: 2px;
          background-color: #fff;
        }
        .r-text {
          height: 90px;
          padding-top: 5px;
          font-size: 16px;
          line-height: 20px;
          overflow: hidden;
          word-wrap: break-word;
          word-break: normal;
          .user {
            display: inline-block;
            color: #333;
            img {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              float: left;
              margin: 0 10px 0 0;
            }
          }
          h4 {
            margin-bottom: 8px;
            font-size: 16px;
            color: #000;
            font-weight: normal;
            em {
              margin-right: 10px;
              font-style: normal;
              font-size: 22px;
              color: #192885;
              vertical-align: middle;
            }
          }
          .num {
            font-size: 16px;
            color: #192885;
            font-weight: bold;
          }
        }
      }
    }
    .ft {
      padding-top: 10px;
      line-height: 20px;
      border-top: 1px dashed #c4c3c3;
      text-align: center;
      .a-link {
        display: inline-block;
        font-size: 14px;
        position: relative;
        padding-right: 15px;
        color: #192885 !important;
        &:hover {
          outline: 0;
          text-decoration: underline;
        }
        .icon-link {
          position: absolute;
          right: 0;
          top: 4px;
          display: inline-block;
          width: 13px;
          height: 13px;
          background: url(../../assets/images/place-sprite8.png) no-repeat -45px 0;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
